<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="UTF-8">
  <title>agreen</title>
  <style>
    body{
      text-align: center;
    }

    button[d-dis=y]{
      background: #999;
      border: 1px solid #999;
    }
  </style>
</head>
<body d-mod="main logic">
  <h3>checkbox</h3>
  <div>
    <label>
      <input type="checkbox" 
      checked="checked" 
      d-check="sattr('d-dis','n',@button)"
      d-uncheck="sattr('d-dis','y',@button)"
      > agreen
    </label>
    <div>
      <button id="aaa" d-click="functionName('@button ' + name)" d-dis="n">click me</button>
    </div>
  </div>
  <h3>class opeation</h3>
  <div>
    <button d-click="_(@#id1,cclass,aclass('red'))">red</button>
    <button d-click="sattr('class','blue',@#id1)">blue</button>
    <div id="id1">6789</div>
    <style>
      .red{
        background: red;
        color: #fff
      }
      .blue{
        background: blue;
        color: #000;
      }
    </style>
    <h3>mod 计数器</h3>
    <div d-mod="inc">
      <div d-init="$return(incs)">0</div>
      <button d-click="incShow(@[d-init])">inc</button>
    </div>
    <div d-mod="inc">
      <div d-init="$return(incs)">0</div>
      <button d-click="incShow(@[d-init])">inc</button>
    </div>
    <div d-mod="inc">
      <div d-init="$return(incs)">0</div>
      <button d-click="incShow(@[d-init])">inc</button>
    </div>
    <div d-mod="inc">
      <div d-init="$return(incs)">0</div>
      <button d-click="incShow(@[d-init])">inc</button>
    </div>
    <div ><button d-click="show()">一共是多少？</button></div>
  <script src="../src/index.js"></script>
  <script>
  function logic(el,addH){
    var incs = []
    function show(){
      var r = incs.map(function(a){
        return a.getN()
      }).reduce(function(a,b){
        return a+b
      })
      alert(r)
    }
    return {
      functionName:function(str){
        alert(str)
      },
      incs:incs,
      show:show
    }
  }
  function inc(el,addH){
    var n = 0
    function incShow(els){
      n++
      els[0].innerText=n
    }
    function getN(){
      return n
    }
    return {
      incShow:incShow,
      getN:getN
    }
  }

  declare.addMod('logic',logic)
  declare.addMod('inc',inc)
  //全局的context
  declare.create(document.body,{
    name:'button'
  })
  </script>
</body>
</html>